<!--蓝底白字-->
<template>
  <div class="fence-main-div" >
    <div style="display: flex;flex-direction: row-reverse">
      <div style="width: 50px">
        <Button style="margin-left: 3px" :title="$t('search')" icon="md-search" @click="search"></Button>
      </div>
      <div style="width: 100%">
        <Input id="input-device-search"  clearable v-model="srhValue" @on-search="search" :placeholder="$t('keyword')" />
      </div>
    </div>

    <Tree id="custom-device-tree" v-show="asyncData"
          :data="deviceDataAsyn"
          :load-data="loadData"
          :render="renderContent"
    />

    <Tree id="custom-device-tree1" v-show="!asyncData"
          :data="deviceDataSync"
          :render="renderContent"
    />
  </div>
</template>
<script>
import Fence from '@/api/Fence';
import FenceButton from "@/view/Fence/FenceButton"
import {apiResult} from "@/libs/util";

export default {
  name:"OrgFenceTree",
  components: {FenceButton},
  watch:{
    deviceData(){
      this.$emit("device-refresh",this.deviceData);
    }
  },
  data(){
    return{
      asyncData:true, //是否异步加载
      api: new Fence(),
      srhValue: null,
      deviceDataAsyn: [],
      deviceDataSync:[
        {
          id: "O-1",
          title: "智能终端",
          type: "org",
          expand: true,
          disabled: false,
          //loading:false,
          children: [],
          polygon: null,
        },
        {
          id: "O-2",
          title: "智能终端909021",
          type: "org",
          expand: true,
          disabled: false,
          children: [],
          polygon: null,
        }
      ],
      buttonProps: {
        type: 'primary',
        size: 'small',
      },
      selectNode: false,
    }
  },
  methods:{
    getData(){
      if (!!this.srhValue){
        this.search();
      }else{
        this.top();
      }
    },

    loadData(item, callback){
      //console.log(">>>>>>> OrgFenceTree.loadData: item=%o,callback=%o",item,callback);
      const that = this;
      let param = {id:item.id};
      this.loading = true;
      this.api.findFenceForOrgTrue(param).then(res=>{
        apiResult(res.data,false,result=>{
          callback(that.resoleData(res.data.data));
          this.$emit("device-refresh",this.deviceData);
        },result=>{
          this.loading = false;
        });
      });
    },

    /**
     * 动态查询 子目录
     */
    loadChildData(orgId){
      const that = this;
      const id = "O-"+orgId;
      let param = {id:id};
      this.loading = true;
      this.api.findFenceForOrgTrue(param).then(res=>{
        apiResult(res.data,false,result=>{
          //console.log("OrgFenceTree.updateNewData: deviceData=%o",this.deviceData);
          this.updateNewData(this.deviceData,id,that.resoleData(result.data));
          //console.log("OrgFenceTree.updateNewData after: deviceData=%o",this.deviceData);
          this.$emit("device-refresh",this.deviceData);
        },result=>{
          this.loading = false;
        });
      });
    },

    testDeviceData(id,children){
      this.updateNewData(this.deviceData,id,children);
    },

    /**
     *  更新新的数据到当前树下
     */
    updateNewData(item,id,children){
      //console.log("OrgFenceTree.updateNewData: id=%o,children=%o",id,children);
      //console.log("OrgFenceTree.updateNewData: item=%o",item);
      //console.log("OrgFenceTree.updateNewData: item.length=%o",item.length);
      for(let i in item){
        //console.log("OrgFenceTree.updateNewData: item[%o].id=%o",i,item[i].id);
        if (item[i].id == id){
          item[i].children = children;
          return;
        }
      }

/*      for(let i in item){
        //console.log("OrgFenceTree.updateNewData: item.id[%i]=%o,item[%].children=%o",i,item[i].id,i,item[i].children);
        console.log("OrgFenceTree.updateNewData: item[i]=%o",item[i]);
        if (item[i].id == id ){
          item[i].children = children;
        }else{
          if (!!item[i].children){
            for(let j in item[i].children){
              this.updateNewData(item[i].children[j],id,children)
            }
          }
        }
      }*/
    },
    /**
     * 搜索
     */
    search(){
      if (!!this.srhValue){
        const that=this;
        const param={keyword:this.srhValue};
        this.api.findFenceForOrgTrue(param).then(res=>{
          apiResult(res.data,false,result=>{
            this.deviceData = that.resoleData0(result.data);
          });
        });
      }else{
        this.top();
      }
    },
    /**
     * 第一级数据
     */
    top(){
      const that = this;
      this.api.findFenceForOrgTrue(null).then(res=>{
        apiResult(res.data,false,result=>{
          that.deviceDataAsyn = that.resoleData(result.data);//;
          //console.log("OrgFenceTree.top: deviceData=%o",this.deviceDataAsyn);
        },result=>{

        });
      });
    },
    resoleData0(originList){
      /*
      if (!originList){originList}
      for(let i in originList){
        if (!!originList[i].longitude && originList[i].longitude!=0.0){
          if (!!originList[i].coordinateSystem){
            const gpsData = solveGps(
              //"WGS84",
              originList[i].coordinateSystem,
              parseFloat(originList[i].latitude),
              parseFloat(originList[i].longitude));
            originList[i].longitude=gpsData.lon;
            originList[i].latitude=gpsData.lat;
          }
        }
        if (!!originList[i].children){
          this.resoleData0(originList[i].children);
        }
      }
      return originList*/
    },
    /**
     * 数据转换
     * @param originList  原数据
     */
    resoleData(originList){
      let target = [];
      if (!!originList){
        let gpsData=null;
        for(let i in originList){
          let data = new Object();
          data.id=originList[i].id;
          data.title=originList[i].title;
          data.type=originList[i].type;

          if (!!originList[i].children){
            data.loading=false;
            data.children=[];
          }
          if (!!originList[i].arrt){
            data.arrt=originList[i].arrt;
          }
          target.push(data);
        }
      }
      return target;
    },

    changeNode(nodes,node){
      /** 这个方法没起作用了*/
      this.$emit('on-select-change', node, node);
    },
    /** Render 渲染 */
    renderContent(h, { root, node, data }){
      //console.log(">>>>>>OrgFenceTree.renderContent data=%o",data);
      if (data.type == 'org'){
        return (
          <span class="node-org-span-org" title={data.title}
                onclick={()=>{
                  this.$emit('fence-org-click', node, data)
                }}>{data.title}
          </span>



/*        <Poptip trigger="hover" placement="right" width="40" props={{transfer:true}}>
          <span className="node-org-span-org" title={data.title}>{data.title}</span>

          <div class="fence-poptip-div" slot="content">
            <FenceButton props={{status:"org"}}
                       onBtnClick={(event)=>{ //需要这么写，对应的是组件<PoptipBtn> this.$emit('btnClick', event)
                         //console.log(">>>>>>> OrgFenceTree.btnClick event=%o",event);
                         this.$emit('fence-org-click', event,node, data)
                       }}
            >
            </FenceButton>
          </div>
        </Poptip>*/

        )
      }
      else if (data.type == 'fence'){
        /** 在线的通道 */
        return(

 /*         <Poptip trigger="hover" placement="right" width="120" props={{transfer:true}}>



            <span class="node-span-fence" title={data.title}
                  onClick={() => {
                    this.$emit('fence-node-click', node, data)
                    //this.$Message.error("onclick");
                  }}
                  onMouseover={(e) => {
                    this.$emit('fence-node-mouseover', node, data)
                    //console.log("OrgFenceTree.mouseEnter: data=%o",data);
                    //this.$Message.error("onMouseover");
                  }}
                  onMmouseleave={(e) => {
                    this.$emit('fence-node-mouseleave',node, data)

                    //console.log("OrgFenceTree.mouseEnter: data=%o",data);
                    //this.$Message.error("onMmouseleave");
                  }}
            >
              {data.title}
            </span>
            <div class="poptip-div" slot="content">
              <FenceButton props={{status:"fence"}}
                         onBtnClick={(event)=>{ //需要这么写，对应的是组件<FenceButton> this.$emit('btnClick', event)
                           this.$emit('fence-node-btn-click', event,node, data)
                         }}
              >
              </FenceButton>
            </div>
          </Poptip>*/


          <span class="node-span-fence" title={data.title}
                onClick={() => {
                  this.$emit('fence-node-click', node, data)
                  //this.$Message.error("onclick");
                }}
                onMouseOver={(e) => {
                  this.$emit('fence-node-mouseover', node, data)
                  //console.log("OrgFenceTree.mouseEnter: data=%o", data);
                  //this.$Message.error("onMouseover");
                }}
                onMmouseleave={(e) => {
                  this.$emit('fence-node-mouseleave', node, data)

                  //console.log("OrgFenceTree.mouseEnter: data=%o", data);
                  //this.$Message.error("onMmouseleave");
                }}
          >{data.title}</span>
        )
      }else{
        return (
          <Poptip trigger="hover" placement="right" width="180" props={{transfer:true}}>
            <span class="node-span-fence" title={data.title}>{data.title}</span>
            <div class="poptip-div" slot="content">
              <PoptipBtn props={{status:0}}
                         onBtnClick={(event)=>{ //需要这么写，对应的是组件<PoptipBtn> this.$emit('btnClick', event)
                           //console.log(">>>>>>>>> GbOrgDeviceTree.renderContent.onBtnClick： data=%o",data);
                           this.$emit('fence-node-click', event,node, data)
                         }}
              >
              </PoptipBtn>
            </div>
          </Poptip>
        )

      }
    },
    fenceNodeClick(e){
      console.log("OrgFenceTree.fenceNodeClick: e=%o",e);
      this.$Message.error("fenceNodeClick");
    },

    mouseEnter(e){
      console.log("FenceTitleNode.mouseEnter: e=%o",e);
      this.$Message.error("menuClick");
    },
    mouseLeave(e){
      console.log("FenceTitleNode.mouseLeave: e=%o",e);
      this.$Message.error("menuClick");
    }
  },
  mounted() {
    this.getData();
  }
}

</script>
<style lang="less">
  //@import "../../components/topnav/GbOrgDeviceTree-bright";
  .fence-main-div {
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    background: #ffffff;
  }
  //组织机构
  .node-org-span-org{
    display: inline-block;
    width: 100%;
    color: #353535 ;
    //font-Weight: bold;
    font-size:14px ;
  }

  .node-span-fence{
    display: inline-block;
    width: 100%;
    color: #3caf36 ;
    //font-Weight: bold;
    font-size:14px ;
  }

  .fence-poptip-div{
    //background-color: #0c0c0c;
    margin-left: 0px;
    display: block;
    .btn{
      margin-left: 5px;
    }
  }
</style>
